<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 300px;
            width: 500px;
            background-color: antiquewhite;
        }

        div h3 {
            display: flex;
            align-items: center;
        }

        h2 {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div>
        <h2>随机问答</h2>
        <h3>倒计时 :
            <p class="p2">5秒</p>
            <p class="p1">???</p>
        </h3>





        <button class="btn1">开始</button>
        <button class="btn2">停止</button>
    </div>
    <script>
        let i = 5
        const arr = ['小阿giao', '黑手哥', '人', '原神', '良子', '杜明鹏', '刀酱', '大林', '门酱']
        const btn1 = document.querySelector('.btn1')
        const btn2 = document.querySelector('.btn2')
        const p1 = document.querySelector('.p1')
        const p2 = document.querySelector('.p2')
        let time = 0
        let ran = 0
        // setInterval(function () {
        //     i--
        //     p2.innerHTML = `${i}秒`
        //     if (i <= 0) {
        //     }
        // }, 1000)

        btn1.addEventListener('click', function () {
            time = setInterval(function () {
                const ran = Math.floor(Math.random() * arr.length)
                p1.innerHTML = arr[ran]
            }, 2)

            if (arr.length === 1) {
                btn1.disabled = 'true'
                btn2.disabled = 'true'
            }

            setInterval(function () {
                i--
                p2.innerHTML = `${i}秒`

                if (i <= 0) {
                    clearInterval(time)
                    p2.innerHTML = '就决定是你了-->'

                    arr.splice(arr[ran], 1)
                    console.log(arr);

                }
            }, 1000)

        })

        // btn2.addEventListener('click', function () {
        //     clearInterval(time)
        //     arr.splice(arr[ran], 1)
        //     console.log(arr);
        // })
    </script>
</body>

</html>